<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>msg:{{msg}}</h2>
    <button @click="msg='你好，vue'">按钮</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '你好'
        },
        beforeCreate() {
            console.log('创建前调用beforeCreate函数')
        },
        created() {
            console.log('创建后调用created函数')
        },
        beforeMount() {
            console.log('载入前调用beforeMount函数')
        },
        mounted() {
            console.log('挂载完成时调用mounted函数')
        },
        beforeUpdate() {
            console.log('数据更新前调用beforeUpdate函数')
        },
        updated() {
            console.log('数据更新后调用updated函数')
        },
        beforeDestroy() {
            console.log('销毁前调用beforeDestroy函数')
        },
        destroyed() {
            console.log('销毁后调用destroyed函数')
        },
    })
</script>
</body>
</html>